<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/chat-msg.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">聊天</h1>
		</header>
		<div class="mui-content">
			<div id="msg-list">

			</div>
		</div>

		<script id="msg-tpl" type="text/html">
			<div class="chat-{{who}}">
				<div class="chat-avatar">
					<img src="{{avatar}}">
				</div>
				<div class="chat-content">
					<div class="chat-triangle"></div>
					{{if type=="text"}}
					<span>{{msg}}</span> {{else if type=="url"}}
					<a href="{{msg}}">{{msg}}</a>
					{{else if type=="img"}}
					<img src="{{msg}}" /> {{/if}}
				</div>
			</div>
		</script>

		<script src="../js/mui.min.js"></script>
		<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
			mui.init();

			// 页面传参数事件监听
			window.addEventListener('chat', function(event) {
				// 获得事件参数
				var username = event.detail.username;
				mui.toast(username);
			});

			/**
			 * @description 显示消息
			 * @param {String} who 消息来源,可选参数: {params} 'sender','receiver'
			 * @param {Object} type 消息类型,可选参数: {params} 'text','url','img'
			 * @param {JSON} data 消息数据,可选参数: {params} {{el:'消息容器选择器'},{senderAvatar:'发送者头像地址'},{receiverAvatar:'接收者头像地址'},{msg:'消息内容'}}
			 * ('text'和'url'类型的msg是文字，img类型的msg是img地址)
			 */
			var appendMsg = function(who, type, data) {
				var html = template('msg-tpl', {
					who: who,
					type: type,
					avatar: who == 'sender' ? data.senderAvatar : data.receiverAvatar,
					msg: data.msg
				});
				document.querySelector(data.el).innerHTML += html;
			}
		</script>
	</body>

</html>